import React from 'react';
import { connect } from 'dva'
import { Button, List, WhiteSpace, TextareaItem ,InputItem,Picker } from 'antd-mobile';
import { createForm } from 'rc-form';
import { routerRedux } from 'dva/router';

const Item = List.Item;

let orgLists = [];
let menberListss=[];
let areaLists=[];
let orgsLists=[];
let orgs=[];
const types = [[{label:"个人",value:"personal"},{label:"整建制",value:"whole"}]];
const areas = [[{label:"市内",value:"incity"},{label:"市外",value:"outcity"}]];
class applytransfer extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      type: [],
      area: [],
      menberValue: [],
      origin_org: [],
      goal_org: "",
      goal_area: [],
      dues_price: "",
      last_pay_date: "",
      apply_reason: "",
      goal_org_name: "",
    }
    this.props.dispatch({
      type: 'organizationss/fetch',
      payload: {},
    });
    this.props.dispatch({
      type: 'organizationss/org',
      payload: {},
    });
    this.props.dispatch({
      type: 'organizationss/orgBottom',
      payload: {},
    });
    this.props.dispatch({
      type: 'partybuildings/fetch1',
      payload: {},
    });
    this.props.dispatch({
      type: 'applytransfers/select',
      payload: {},
    });
  }
  typeClick=(v)=>{
    this.state.type=[],
      this.state.area=[],
      this.state.menberValue=[],
      this.state.origin_org=[],
      this.state.goal_org="",
      this.state.goal_area=[],
      this.state.dues_price="",
      this.state.last_pay_date="",
      this.state.apply_reason="",
      this.state.goal_org_name="",
    this.setState({type: v})
  }
  appClick = () => {
    this.props.form.validateFields({force: true}, (error) => {
      if (!error) {
        let newsObject = sessionStorage.getItem('userdata');
        newsObject = JSON.parse(newsObject);
        this.props.dispatch({
          type: 'applytransfers/fetch',
          payload: {
            type: this.state.type[0],
            area: this.state.area[0],
            apply_reason: this.state.apply_reason,
            operator: newsObject[0].administrator[1].username,
            member_infos: [
              {code: this.state.menberValue[0]},
              {dues_price: this.state.dues_price},
              {last_pay_date: this.state.last_pay_date}
            ],
            origin_org_zb_code: this.state.origin_org[0],
            goal_org_zb_code: this.state.goal_org[0],
            goal_area_id: this.state.goal_area[0],
            goal_org_name: this.state.goal_org_name,
          },
        });
      } else {
        console.log(error);
      }
    });
  };

  render() {
    if (this.props.orgs) {
      const orgsData = this.props.orgs;
      if (orgs.length < 1) {
        for (let key in orgsData) {
          orgs.push({label: orgsData[key].name, value: orgsData[key].zb_code})
        }
      }
    }
    if (this.props.orgList) {
      const orgData = this.props.orgList;
      if (orgLists.length < 1) {
        for (let key in orgData) {
          orgLists.push({label: orgData[key].name, value: orgData[key].zb_code})
        }
      }
    }
    if (this.props.orgLists) {
      const orgsData = this.props.orgLists;
      if (orgsLists.length < 1) {
        for (let key in orgsData) {
          orgsLists.push({label: orgsData[key].name, value: orgsData[key].zb_code})
        }
      }
    }
    if (this.props.list) {
      const menberData = this.props.list;
      if (menberListss.length < 1) {
        for (let key in menberData) {
          menberListss.push({label: menberData[key].name, value: menberData[key].code})
        }
      }
    }
    if (this.props.area) {
      const areaData = this.props.area;
      if (areaLists.length < 1) {
        for (let key in areaData) {
          if (areaData[key].parent_id == 10) {
            areaLists.push({label: areaData[key].name, value: areaData[key].id})
          }
        }
        console.log("areaLists", areaLists);
      }
    }
    const {getFieldProps, getFieldError} = this.props.form;
    return (
      <div>
        <Picker
          data={types}
          title="转接类型"
          cascade={false}
          extra="转接类型(必填)"
          value={this.state.type}
          onChange={v => this.setState({type: v})}
          onOk={v => this.typeClick(v)}
        >
          <List.Item arrow="horizontal">转接类型</List.Item>
        </Picker>
        {this.state.type[0] == "personal"&&
          <div>
            <Picker
              data={Array.from([menberListss])}
              title="转接党员"
              cascade={false}
              extra="转接党员(必填)"
              value={this.state.menberValue}
              onChange={v => this.setState({menberValue: v})  }
              onOk={v => this.setState({menberValue: v})}
            >
              <List.Item arrow="horizontal">转接党员</List.Item>
            </Picker>
            <Picker
              data={areas}
              title="转接区域"
              cascade={false}
              extra="转接区域(必填)"
              value={this.state.area}
              onChange={v => this.setState({area: v})}
              onOk={v => this.setState({area: v})}
            >
              <List.Item arrow="horizontal">转接区域</List.Item>
            </Picker>
            {this.state.area[0] == "incity" &&
            <Picker
              data={Array.from([orgsLists])}
              title="目标组织"
              cascade={false}
              extra="必填，必须是支部"
              value={this.state.goal_org}
              onChange={v => this.setState({goal_org: v})}
              onOk={v => this.setState({goal_org: v})}
            >
              <List.Item arrow="horizontal">目标组织</List.Item>
            </Picker>
            }
            {this.state.area[0] == "outcity" && <div>
              <Picker
                data={Array.from([areaLists])}
                title="目标组织地区"
                cascade={false}
                extra="目标组织地区"
                value={this.state.goal_area}
                onChange={v => this.setState({goal_area: v})}
                onOk={v => this.setState({goal_area: v})}
              >
                <List.Item arrow="horizontal">目标组织地区</List.Item>
              </Picker>
              <InputItem
                placeholder="目标组织名称"
                value={this.state.goal_org_name}
                onChange={v => this.setState({goal_org_name: v})}
              > 目标组织名称 </InputItem>
            </div>
            }
            <div>
              <InputItem
                placeholder="党员党费标准"
                value={this.state.dues_price}
                onChange={v => this.setState({dues_price: v})}
              > 党费标准 </InputItem>
              <InputItem
                placeholder="格式 YYYY-MM"
                value={this.state.last_pay_date}
                onChange={v => this.setState({last_pay_date: v})}
              >最后缴费月份</InputItem>
            </div>
          </div>
        }
        {this.state.type[0] == "whole" &&
        <div>
          <Picker
            data={Array.from([orgs])}
            title="原组织"
            cascade={false}
            extra="请选择原组织"
            value={this.state.origin_org}
            onChange={v => this.setState({origin_org: v})}
            onOk={v => this.setState({origin_org: v})}
          >
            <List.Item arrow="horizontal">原组织</List.Item>
          </Picker>
          <Picker
            data={areas}
            title="转接区域"
            cascade={false}
            extra="转接区域(必填)"
            value={this.state.area}
            onChange={v => this.setState({area: v})}
            onOk={v => this.setState({area: v})}
          >
            <List.Item arrow="horizontal">转接区域</List.Item>
          </Picker>
          {this.state.area[0] == "incity" &&
          <Picker
            data={Array.from([orgLists])}
            title="目标组织"
            cascade={false}
            extra="必填，必须是总支部"
            value={this.state.goal_org}
            onChange={v => this.setState({goal_org: v})}
            onOk={v => this.setState({goal_org: v})}
          >
            <List.Item arrow="horizontal">目标组织</List.Item>
          </Picker>
          }
          {this.state.area[0] == "outcity" && <div>
            <Picker
              data={Array.from([areaLists])}
              title="目标组织地区"
              cascade={false}
              extra="目标组织地区"
              value={this.state.goal_area}
              onChange={v => this.setState({goal_area: v})}
              onOk={v => this.setState({goal_area: v})}
            >
              <List.Item arrow="horizontal">目标组织地区</List.Item>
            </Picker>
            <InputItem
              placeholder="目标组织名称"
              value={this.state.goal_org_name}
              onChange={v => this.setState({goal_org_name: v})}
            > 目标组织名称 </InputItem>
          </div>
          }
        </div>
        }
        {
          console.log("orgLists", orgLists)
        }
        <WhiteSpace size="lg"/>
        <List>
          <TextareaItem
            title="申请原因"
            placeholder="转接的原因(必填)"
            data-seed="logId"
            ref={el => this.autoFocusInst = el}
            onChange={v => this.setState({apply_reason: v})}
            autoHeight
          />
        </List>
        <WhiteSpace size="lg"/>
        <WhiteSpace size="lg"/>
        <WhiteSpace size="lg"/>
        <Button style={{backgroundColor: '#DF3031', color: '#ffffff'}} onClick={this.appClick}>申请</Button>
      </div>
    )
  }
}
const Form = createForm()(applytransfer);
function mapStateToProps({PartyOfintegra,partybuildings,organizationss,applytransfers}) {
    return {
      orgs: organizationss.orgLists,
      orgList: organizationss.orgs,
      orgLists: organizationss.orgBottom,
      list: partybuildings.menbers,
      area: applytransfers.area,
    }
}
export default connect(mapStateToProps)(Form);
